<%--
  Created by IntelliJ IDEA.
  User: YCB
  Date: 2019/10/11
  Time: 19:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href= "${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-theme.css">
    <script src="${pageContext.request.contextPath}/js/index.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/dist/js/bootstrap.js"></script>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    <style type="text/css">
        .tabs-container{
            width:650px;
            padding: 10px;
        }
        .tabs{
            display: table-cell;
            width: 10000px;
        }
        .tab{
            display: inline-block;
            border: 1px solid #c5c5c5;
            border-radius: 2px;
            height: 30px;
            margin-bottom: 14px;
            margin-right: 12px;
            padding: 0px 10px;
        }
        .tab .tab-show{
            margin-right: 5px;
        }
        .tab .tab-text{
            border: none;
            display: none;
            outline: none;
        }
        .tab .tab-edit{
            cursor: pointer;
            color:gray;
        }
        /*这是利用after后面加content*/
        /*.tab .tab-edit::after{
            content: "\270f";
        }*/
        /*这是设置一个背景图片*/
        .tab .tab-edit{
            /*margin-top: 3px;*/
            margin-left: 2px;
            cursor: pointer;
            width: 21px;
            height: 21px;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/edit_lable_c.png) no-repeat left 5px;
            background-position: 0px 6px;
        }
        .tab .tab-delete{
            cursor: pointer;
            width: 21px;
            height: 21px;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/delete_lable_c.png) no-repeat left 5px;
            background-position: 0px 6px;
        }

        .tab.active .tab-show{
            display: none;
        }
        .tab.active .tab-text{
            display: inline-block;
            font-size: 16px;
            width: 130px;
        }
        /*这是利用after后面加content*/
        /*.tab.active .tab-edit::after{
            content:"\2713";
        }*/
        /*这是设置一个背景图片*/
        .tab.active .tab-edit{
            color:blue;
            background: url(${pageContext.request.contextPath}/images/sure_lable_c.png) no-repeat left 5px;
            width: 21px;
            height: 21px;
            display: inline-block;
        }

        .tab.active .tab-delete{
            color: #666;
            display: none;
        }
        .tab.active .tab-delete:hover{
            color: #999;
        }
        .tab.active .tab-delete:active{
            color: #333;
        }
        .tabs .tab-add{
            width: 21px;
            height: 21px;
            cursor: pointer;
            display: inline-block;
            background: url(${pageContext.request.contextPath}/images/add_lable_c.png) no-repeat  center;
            background-position: 0px 2px;
        }
        #btn{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="label-deploy" style="margin-top:50px;">
    <div style="">
        <span><strong style="font-size: 20px;color: #636363">添加相关标签</strong></span>
    </div>

    <div class="tabs-container">
        <div class="tabs" id="tabs">
        </div>
    </div>
</div>

<script>

    var datas=[
        {
            text:"aaa"
        }
    ];

    $("#tabs").html(
        datas.map(function(data){
            return addTab(data);
        })
    ).append(
        $("<a/>",{
            "class":"tab-add",
            "text":"",
            "click":function(){
                $(this).before(
                    addTab({text:""})
                )
            }
        })
    );

    //创建标签
    function addTab(data){
        console.log("addTab")
        var tab=$("<div/>",{
            "class":"tab",
            "style":"border-radius:4px"
        }).append(
            $("<span/>",{
                "class":"tab-show",
                "html":data.text
            }),
            $("<input/>",{
                "class":"tab-text",
                "value":data.text,
                "maxlength":7
            }),
            $("<a/>",{
                "class":"tab-edit",
                "click":function(){
                    tab.toggleClass("active");
                    if(!tab.hasClass("active")){
                        tab.find(".tab-show").html(tab.find(".tab-text").val());
                    }
                }
            }),
            $("<a/>",{
                "class":"tab-delete",
                "text":"",
                "click":function(){
                    tab.remove();
                }
            })
        );
        return tab;
    }
</script>
</body>
</html>
